<template>
  <div class="AAP_module">
    <module-header
      :title="title"
      :meter="meter"
      :params="{
        module: 'AAP',
        status,
        Id: '',
        Bore: '',
        Cutting: ''
      }"
    />
    <section class="nameplate">
      <task-tab class="nameplate_content" :settings="nameplate_settings"></task-tab>
    </section>
    <section class="tool">
      <!-- 审核 -->
      <div class="progress zone">
        <!-- <ws-time-line
          class="timeline"
          :timeline-array="activities"
          :current="current"
          :isFold="false"
          direction="horizontal"
          @on-dot-click="onDotClick"
        /> -->
        <div class="main">
          <span class="title">
            {{ current }}
            <el-select v-model="activity_status" size="mini"></el-select>
          </span>
          <div class="swiper">
            <div class="swiper-wrapper">
              <div v-for="items in activity_items" :key="items.key" class="swiper-slide">
                <div v-for="item in items.value" :key="item" class="item">
                  <i
                    :class="{
                      iconfont: true,
                      'icon-to-do': true,
                      'icon-selected': false,
                      'icon-close': false
                    }"
                  />
                  <span>{{ item }}</span>
                </div>
              </div>
            </div>
            <div class="swiper-button-prev">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class="swiper-button-next">
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
      <!-- 文件预览 -->
      <div class="preview zone">
        <span class="title">文件预览</span>
        <div class="row">
          <file-upload class="file" title="相关附件"></file-upload>
          <div class="column">
            <div class="remark">
              <span>备注</span>
              <el-input type="textarea" rows="7" resize="none" placeholder="请输入备注信息" />
            </div>
            <div class="buttons">
              <el-button size="mini" type="primary">导出生产配置文件</el-button>
              <el-button size="mini" type="primary">打开核查软件</el-button>
              <el-button size="mini" type="primary">关闭核查软件</el-button>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="table">
      <record-table
        title="第三方记录表"
        procedure="AAO"
        :meter="meter"
        :limits="RecordTableLimit"
        :params="{
          title,
          Cutting: ''
        }"
        :tableColumnDict="tableColumnDict"
        :tableData="tableData"
      ></record-table>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Watch, Prop } from 'vue-property-decorator'
import RecordTable from '@/components/basic/RecordTable.vue'
import ModuleHeader from '@/components/basic/ModuleHeader.vue'
import TaskTab from '@/views/dashboard/compoents/TaskTab.vue'
import FileUpload from '@/components/basic/FileUpload.vue'
import { tableColumnDict, TableColumnType, nameplate_settings } from './params'
import { TimeLineSetting } from '@/interface/Basic'
import { Dictionary } from '@/interface/Basic'
import Swiper, { Navigation } from 'swiper'
import 'swiper/modules/navigation/navigation.less'
import 'swiper/modules/pagination/pagination.less'
@Component({
  components: {
    RecordTable,
    TaskTab,
    ModuleHeader,
    FileUpload
  }
})
class AAP extends Vue {
  @Prop() status!: string
  @Prop({ default: '' }) meter!: string
  @Prop({ required: true }) title!: string
  tableColumnDict = tableColumnDict
  tableData: TableColumnType[] = []
  nameplate_settings = nameplate_settings
  current: string = '外观检查'
  current_content: string[] = []
  // activities: TimeLineSetting[] = [
  //   {
  //     name: '外观检查',
  //     label: '外观检查',
  //     type: 'completed',
  //     disabled: false,
  //     content: {}
  //   },
  //   {
  //     name: '累计量设置及检查',
  //     label: '累计量设置及检查',
  //     type: 'uncompleted',
  //     disabled: false,
  //     content: {}
  //   },
  //   {
  //     name: '出厂设置核查',
  //     label: '出厂设置核查',
  //     type: 'uncompleted',
  //     disabled: false,
  //     content: {}
  //   },
  //   {
  //     name: '第三方检校完成确认',
  //     label: '第三方检校完成确认',
  //     type: 'uncompleted',
  //     disabled: false,
  //     content: {}
  //   }
  // ]
  activity_items = [
    {
      key: '外观核验',
      value: [
        '应按标准要求装配，前盖、侧面罩螺丝等安装到位，无缺漏现象，并做好铅封',
        '外表面应经过良好的表面处理，不得有镀层脱落、锈蚀、划伤、玷污等缺陷',
        '密封面检查，应平整，不得有损伤，并做好防护',
        '丝标识标牌检查，内容信息准确，安装固定牢固（铭牌、流向、接地、接线图等）',
        '接线端子检查，应无漏缺损坏的情况'
      ]
    },
    {
      key: '流量校准测试',
      value: [
        '按订单及规程要求对流量计进行标定检测，其示值误差和重复性指标均应符合精度要求',
        '检定过程中对液晶显示流量值核对，应与检定输出量一致'
      ]
    },
    {
      key: '累计量设置及检查',
      value: ['新表应将累积量清零', '维修表则应按累积量记录设置，操作完成后检查']
    },
    {
      key: '恢复出厂设置',
      value: ['应按要求设置无异常（小流量切除、工作模式等核查）', '铭牌再次核对确认']
    },
    { key: '第三方检校判定', value: ['是否需要送第三方机构检校'] }
  ]
  activity_status = ''
  init_button_limit: Dictionary<boolean> = {
    // 保存
    AAG_0: true,
    // 删除
    AAG_1: true,
    // 新建
    AAG_2: true,
    // 读取三坐标
    AAG_3: true,
    // 手动选择三坐标
    AAG_4: true
  }
  get RecordTableLimit(): Dictionary<boolean> {
    const { AAG_0, AAG_1, AAG_2 } = this.init_button_limit
    return {
      Store: AAG_0,
      Create: AAG_2,
      Delete: AAG_1
    }
  }
  @Watch('current', { immediate: true })
  c_handler(newVal: string) {
    const idx = this.activity_items.findIndex(item => item.key === newVal)
    this.current_content = this.activity_items[idx].value
  }
  onDotClick(dot: TimeLineSetting) {
    const { name } = dot
    this.current = name
  }
  mounted() {
    this.initSwiper()
  }
  initSwiper() {
    new Swiper('.swiper', {
      modules: [Navigation],
      loop: true,
      spaceBetween: 100,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets'
      },
      on: {
        slideChange: swiper => {
          let { activeIndex } = swiper
          if (activeIndex > this.activity_items.length) {
            activeIndex = activeIndex - this.activity_items.length
          }
          this.current = this.activity_items[activeIndex - 1].key
        }
      }
    })
  }
}
export default AAP
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.AAP_module {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: 100%;
  #flex(column, flex-start, flex-start);
  section {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
    #color(background-color, --module-bg-color);
    #shadow-color(0, 2px, 12px, 0, --primary-shadow-color);
  }
  .nameplate {
    #flex(row, center, space-between);
    .nameplate_content {
      flex: 1;
      max-height: 200px;
      overflow: hidden;
    }
  }
  .tool {
    box-shadow: unset !important;
    background-color: unset !important;
    padding: 0;
    min-height: 200px;
    #flex(row, center, space-between);
    .zone {
      box-sizing: border-box;
      padding: 10px;
      margin-right: 20px;
      height: 100%;
      border-radius: 5px;
      #color(background-color, --module-bg-color);
      #shadow-color(0, 2px, 12px, 0, --primary-shadow-color);
      .title {
        box-sizing: border-box;
        display: block;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: solid 1px;
        font-size: 16px;
        #color(color, --primary-text-color);
        #color(border-bottom-color, --primary-border-color);
      }
    }
    .zone:last-child {
      flex: 1;
      margin-right: 0;
    }
    .progress {
      width: 450px;
      #flex(column, center, flex-start);
      .main {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        #flex(column, center, flex-start);
        #color(color, --primary-text-color);
        .title {
          box-sizing: border-box;
          width: 100%;
          padding: 8px 12px;
          margin-bottom: 15px;
          border-radius: 5px;
          font-size: 14px;
          color: #ffffff;
          #flex(row, center, flex-start);
          #color(background-color, --primary-blue-color);
          .el-select {
            flex: 1;
            margin-left: 10px;
          }
        }
        .swiper {
          width: 100%;
          height: 100%;
          .swiper-wrapper {
            height: 100%;
            .swiper-slide {
              width: 100%;
              height: 100%;
              #flex(column, center, center);
              .item {
                width: 80%;
                margin-bottom: 15px;
                font-size: 14px;
                #flex(row, center, space-between);
                i {
                  box-sizing: border-box;
                  padding: 5px;
                  margin-right: 10px;
                  border-radius: 50%;
                  color: #ffffff;
                }
                span {
                  flex: 1;
                  font-size: 14px;
                  text-align: left;
                }
                .icon-to-do {
                  #color(background-color, --primary-blue-color);
                }
                .icon-close {
                  #color(background-color, --primary-red-color);
                }
                .icon-selected {
                  #color(background-color, --primary-green-color);
                }
              }
            }
          }
          .swiper-button-prev,
          .swiper-button-next {
            height: 25px;
            width: 25px;
            border-radius: 50%;
            #color(color, --primary-blue-color);
            #color(background-color, --module-bg-color);
            #shadow-color(0, 0, 6px, 1px, --primary-shadow-color);
          }
          .swiper-button-prev::after,
          .swiper-button-next::after {
            content: '';
            font-family: unset;
          }
          /deep/.swiper-pagination {
            .swiper-pagination-bullet {
              #color(background-color, --primary-scroll-color);
            }
            .swiper-pagination-bullet-active {
              #color(background-color, --primary-blue-color);
            }
          }
        }
      }
      .timeline {
        height: 60px;
      }
    }
    .preview {
      #flex(column, flex-start, flex-start);
      .row {
        flex: 1;
        width: 100%;
        #flex(row, center, space-between);
        .file {
          width: 300px;
        }
        .column {
          flex: 1;
          height: 100%;
          margin-left: 20px;
          #flex(column, flex-start, flex-start);
          .remark {
            width: 100%;
            margin-bottom: 10px;
            #flex(column, center, flex-start);
            span {
              width: 100%;
              line-height: 38px;
              text-align: left;
              font-size: 18px;
              font-weight: 900;
              #color(color, --primary-text-color);
            }
          }
          .buttons {
            width: 100%;
            #flex(row, center, flex-start);
            .el-button {
              flex: 1;
              margin-bottom: 10px;
            }
          }
        }
      }
    }
  }
  .table {
    flex: 1;
    margin-bottom: 0;
  }
}
</style>
